<template>
  <div class="home-container layout-pd">
    <el-row :gutter="5" class="home-card-two">
      <el-col :span="24" v-if="!mobile">
        <HomeHeader class="home-card-item animate__animated animate__fadeInLeft mb5" />
      </el-col>
      <el-col
        :xs="24"
        :sm="isAway ? 24 : 14"
        :md="isAway ? 24 : 16"
        :lg="isAway ? 24 : 17"
        :xl="isAway ? 24 : 18"
      >
        <el-row :gutter="5">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb5 home-left">
            <el-button
              v-if="!mobile"
              class="home-left-btn animate__animated animate__fadeInRight"
              :icon="isAway ? DArrowLeft : DArrowRight"
              @click="onIsAway"
            >
              收起侧栏
            </el-button>
            <div class="home-card-item animate__animated animate__fadeInRight mb5">
              <HomeQuick />
            </div>
            <div class="home-card-item animate__animated animate__fadeInLeft mb5">
              <HomeNeed />
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :xs="24" :sm="10" :md="8" :lg="7" :xl="6" v-if="!isAway">
        <div class="home-card-item animate__animated animate__fadeInDown mb5" style="padding: 0">
          <HomeCalendar />
        </div>
        <div
          class="home-card-item animate__animated animate__zoomInDown mb5"
          v-if="themeConfig.isHotSearch"
        >
          <HomeHotSearch />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="home">
import { ref } from 'vue'
import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
import { Local } from '@/utils/storage'
import { storeToRefs } from 'pinia'
import { useAppState } from '@/stores/appState'
import { themeConfig } from '@/storage'

import HomeNeed from '@/views/home/components/HomeNeed.vue'
import HomeQuick from '@/views/home/components/HomeQuick.vue'
import HomeCalendar from '@/views/home/components/HomeCalendar.vue'
import HomeHeader from '@/views/home/components/HomeHeader.vue'
import HomeHotSearch from '@/views/home/components/HomeHotSearch.vue'

const { mobile } = storeToRefs(useAppState())
// 右边消失
const isAway = ref(Local.get('home_is_away') || false)

/**
 * 收起公告
 */
const onIsAway = () => {
  isAway.value = !isAway.value
  Local.set('home_is_away', isAway.value)
}
</script>

<style lang="scss" scoped>
@for $i from 0 through 3 {
  .home-one-animation#{$i} {
    opacity: 0;
    animation-name: error-num;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-delay: calc($i/4) + s;
  }
}

.handling-icon {
  color: var(--el-color-primary);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--el-color-primary-light-9);
}

.home-left {
  position: relative;
}

.home-left .home-left-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 1;
}

.home-card-top,
.home-card-item {
  width: 100%;
  border-radius: 4px;
  transition: all ease 0.3s;
  padding: 5px;
  overflow: hidden;
  background: var(--el-bg-color);
  color: var(--el-text-color-primary);
  border: 1px solid var(--next-border-color-light);

  &:hover {
    box-shadow: 0 2px 12px var(--next-color-dark-hover);
    transition: all ease 0.3s;
  }

  &-icon {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    flex-shrink: 1;

    i {
      color: var(--el-text-color-placeholder);
    }
  }

  &-title {
    font-size: 15px;
    font-weight: bold;
    height: 30px;
  }
}

.home-card-top {
  height: 100px;
}
</style>
